<!--fjl 订单列表  2017-12-18-->
<template>
  <section>
    <!--全部工具条 start -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;" v-show="visible.allList">
      <el-form :inline="true" :model="allFilters" @submit.native.prevent>
        <el-form-item label="搜索">
          <el-input v-model="allFilters.search" placeholder="订单号、用户id或商品名称"></el-input>
        </el-form-item>
        <el-form-item label="订单类型">
          <el-select v-model="allFilters.order_type" placeholder="请选择">
            <el-option
              v-for="(item,index) in typeOptions"
              :key="index+1"
              :label="item"
              :value="index+1">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          选择日期
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="allFilters.startDate"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>至</el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="allFilters.endDate"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="handleList('all')" icon="el-icon-search" place>搜索</el-button>
          <el-button type="success" v-on:click="exportToExcel('all')" place >导出</el-button>
          <el-button type="default" v-on:click="handleRestFilters('all')" icon="el-icon-refresh">重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!--全部工具条 end -->

    <!--待付款工具条 start -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;" v-show="visible.unpaidList">
      <el-form :inline="true" :model="unpaidFilters" @submit.native.prevent>
        <el-form-item label="搜索">
          <el-input v-model="unpaidFilters.search" placeholder="订单号、用户id或商品名称"></el-input>
        </el-form-item>
        <el-form-item label="订单类型">
          <el-select v-model="unpaidFilters.order_type" placeholder="请选择">
            <el-option
              v-for="(item,index) in typeOptions"
              :key="index+1"
              :label="item"
              :value="index+1">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          选择日期
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="unpaidFilters.startDate"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>至</el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="unpaidFilters.endDate"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="handleList('unpaid')" icon="el-icon-search" place>搜索</el-button>
          <el-button type="success" v-on:click="exportToExcel('unpaid')" place>导出</el-button>
          <el-button type="default" v-on:click="handleRestFilters('unpaid')" icon="el-icon-refresh">重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!--待付款工具条 end -->

    <!--待发货工具条 start -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;" v-show="visible.undeliveredList">
      <el-form :inline="true" :model="undeliveredFilters" @submit.native.prevent>
        <el-form-item label="搜索">
          <el-input v-model="undeliveredFilters.search" placeholder="订单号、用户id或商品名称"></el-input>
        </el-form-item>
        <el-form-item label="订单类型">
          <el-select v-model="undeliveredFilters.order_type" placeholder="请选择">
            <el-option
              v-for="(item,index) in typeOptions"
              :key="index+1"
              :label="item"
              :value="index+1">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          选择日期
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="undeliveredFilters.startDate"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>至</el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="undeliveredFilters.endDate"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="handleList('undelivered')" icon="el-icon-search" place>搜索</el-button>
          <el-button type="success" v-on:click="exportToExcel('undelivered')" place>导出</el-button>
          <el-button type="warning" v-on:click="handleBulkDelivery('undelivered')" place>批量发货</el-button>
          <el-button type="default" v-on:click="handleRestFilters('undelivered')" icon="el-icon-refresh">重置
          </el-button>

        </el-form-item>
      </el-form>
    </el-col>
    <!--待发货工具条 end -->

    <!--已发货工具条 start -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;" v-show="visible.deliveredList">
      <el-form :inline="true" :model="deliveredFilters" @submit.native.prevent>
        <el-form-item label="搜索">
          <el-input v-model="deliveredFilters.search" placeholder="订单号、用户id或商品名称"></el-input>
        </el-form-item>
        <el-form-item label="订单类型">
          <el-select v-model="deliveredFilters.order_type" placeholder="请选择">
            <el-option
              v-for="(item,index) in typeOptions"
              :key="index+1"
              :label="item"
              :value="index+1">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          选择日期
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="deliveredFilters.startDate"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>至</el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="deliveredFilters.endDate"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="handleList('delivered')" icon="el-icon-search" place>搜索
          </el-button>
          <el-button type="success" v-on:click="exportToExcel('delivered')" place>导出</el-button>
          <el-button type="default" v-on:click="handleRestFilters('delivered')" icon="el-icon-refresh">重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!--已发货工具条 end -->

    <!--已完成工具条 start -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;" v-show="visible.completedList">
      <el-form :inline="true" :model="completedFilters" @submit.native.prevent>
        <el-form-item label="搜索">
          <el-input v-model="completedFilters.search" placeholder="订单号、用户id或商品名称"></el-input>
        </el-form-item>
        <el-form-item label="订单类型">
          <el-select v-model="completedFilters.order_type" placeholder="请选择">
            <el-option
              v-for="(item,index) in typeOptions"
              :key="index+1"
              :label="item"
              :value="index+1">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          选择日期
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="completedFilters.startDate"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>至</el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="completedFilters.endDate"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="handleList('completed')" icon="el-icon-search" place>搜索
          </el-button>
          <el-button type="success" v-on:click="exportToExcel('completed')" place>导出</el-button>
          <el-button type="default" v-on:click="handleRestFilters('completed')" icon="el-icon-refresh">重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!--已完成工具条 end -->

    <!--已取消工具条 start -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;" v-show="visible.deletedList">
      <el-form :inline="true" :model="deletedFilters" @submit.native.prevent>
        <el-form-item label="搜索">
          <el-input v-model="deletedFilters.search" placeholder="订单号、用户id或商品名称"></el-input>
        </el-form-item>
        <el-form-item label="订单类型">
          <el-select v-model="deletedFilters.order_type" placeholder="请选择">
            <el-option
              v-for="(item,index) in typeOptions"
              :key="index+1"
              :label="item"
              :value="index+1">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          选择日期
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="deletedFilters.startDate"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>至</el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="deletedFilters.endDate"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="handleList('deleted')" icon="el-icon-search" place>搜索
          </el-button>
          <el-button type="success" v-on:click="exportToExcel('deleted')" place>导出</el-button>
          <el-button type="default" v-on:click="handleRestFilters('deleted')" icon="el-icon-refresh">重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!--已取消工具条 end -->

    <!--退款中工具条 start -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;" v-show="visible.refundingList">
      <el-form :inline="true" :model="refundingFilters" @submit.native.prevent>
        <el-form-item label="搜索">
          <el-input v-model="refundingFilters.search" placeholder="订单号、用户id或商品名称"></el-input>
        </el-form-item>
        <el-form-item label="订单类型">
          <el-select v-model="refundingFilters.order_type" placeholder="请选择">
            <el-option
              v-for="(item,index) in typeOptions"
              :key="index+1"
              :label="item"
              :value="index+1">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          选择日期
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="refundingFilters.startDate"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>至</el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="refundingFilters.endDate"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="handleList('refunding')" place>搜索</el-button>
          <el-button type="success" v-on:click="exportToExcel('refunding')" place>导出</el-button>
          <el-button type="default" v-on:click="handleRestFilters('refunding')" icon="el-icon-refresh">重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!--退款中工具条 end -->

    <!--tab栏 start-->
    <el-col>
      <template>
        <el-tabs v-model="tab" type="card" @tab-click="handleTagClick">
          <el-tab-pane name="all">
                        <span slot="label">
                            全部订单(<span style="color: red">{{total.all}}</span>)
                        </span>
          </el-tab-pane>
          <el-tab-pane name="unpaid">
                             <span slot="label">
                            待付款(<span style="color: red">{{total.unpaid}}</span>)
                        </span>
          </el-tab-pane>
          <el-tab-pane name="undelivered">
                             <span slot="label">
                            待发货(<span style="color: red">{{total.undelivered}}</span>)
                        </span>
          </el-tab-pane>
          <el-tab-pane name="delivered">
                             <span slot="label">
                            已发货(<span style="color: red">{{total.delivered}}</span>)
                        </span>
          </el-tab-pane>
          <el-tab-pane name="completed">
                             <span slot="label">
                            已完成(<span style="color: red">{{total.completed}}</span>)
                        </span>
          </el-tab-pane>
          <el-tab-pane name="deleted">
                             <span slot="label">
                            已取消(<span style="color: red">{{total.deleted}}</span>)
                        </span>
          </el-tab-pane>
          <el-tab-pane name="refunding">
                             <span slot="label">
                            退款中(<span style="color: red">{{total.refunding}}</span>)
                        </span>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-col>
    <!--tab栏 end-->
    <!--全部订单列表 start-->
    <el-table :data="allList" highlight-current-row v-loading="visible.listLoading" @selection-change=""
              style="width: 100%;" v-show="visible.allList">
      <el-table-column type="selection" width="50">
      </el-table-column>
      <el-table-column prop="order_no" label="订单号">
      </el-table-column>
      <el-table-column prop="created_at" label="提交时间">
      </el-table-column>
      <el-table-column prop="user.user_no" label="用户id">
      </el-table-column>
      <el-table-column prop="order_total" label="订单金额">
      </el-table-column>
      <el-table-column prop="order_pay_method" label="支付方式">
      </el-table-column>
      <el-table-column prop="order_source" label="订单来源" :formatter="formatSource">
      </el-table-column>
      <el-table-column prop="order_status" label="订单状态" :formatter="formatStatus">
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <router-link :to="'/order/list/detail/'+scope.row.order_id">详情</router-link>
          <span class="click-detail" @click="deleteOption(scope.row)"
                v-if="scope.row.order_status=='0'">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <!--全部订单列表 end-->

    <!-- 待付款订单列表 start-->
    <el-table :data="unpaidList" highlight-current-row v-loading="visible.listLoading" @selection-change=""
              style="width: 100%;" v-show="visible.unpaidList">
      <el-table-column type="selection" width="50">
      </el-table-column>
      <el-table-column prop="order_no" label="订单号">
      </el-table-column>
      <el-table-column prop="created_at" label="提交时间">
      </el-table-column>
      <el-table-column prop="user.user_no" label="用户id">
      </el-table-column>
      <el-table-column prop="order_total" label="订单金额">
      </el-table-column>
      <el-table-column prop="order_pay_method" label="支付方式">
      </el-table-column>
      <el-table-column prop="order_source" label="订单来源" :formatter="formatSource">
      </el-table-column>
      <el-table-column prop="order_status" label="订单状态" :formatter="formatStatus">
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <router-link :to="'/order/list/detail/'+scope.row.order_id">详情</router-link>
        </template>
      </el-table-column>
    </el-table>
    <!--待付款订单列表 end-->

    <!-- 待发货订单列表 start-->
    <el-table :data="undeliveredList" highlight-current-row v-loading="visible.listLoading" @selection-change=""
              style="width: 100%;" v-show="visible.undeliveredList">
      <el-table-column type="selection" width="50">
      </el-table-column>
      <el-table-column prop="order_no" label="订单号">
      </el-table-column>
      <el-table-column prop="created_at" label="提交时间">
      </el-table-column>
      <el-table-column prop="user.user_no" label="用户id">
      </el-table-column>
      <el-table-column prop="order_total" label="订单金额">
      </el-table-column>
      <el-table-column prop="order_pay_method" label="支付方式">
      </el-table-column>
      <el-table-column prop="order_source" label="订单来源" :formatter="formatSource">
      </el-table-column>
      <el-table-column prop="order_status" label="订单状态" :formatter="formatStatus">
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <router-link :to="'/order/list/detail/'+scope.row.order_id">详情</router-link>
        </template>
      </el-table-column>
    </el-table>
    <!--待发货订单列表 end-->

    <!-- 已发货订单列表 start-->
    <el-table :data="deliveredList" highlight-current-row v-loading="visible.listLoading" @selection-change=""
              style="width: 100%;" v-show="visible.deliveredList">
      <el-table-column type="selection" width="50">
      </el-table-column>
      <el-table-column prop="order_no" label="订单号">
      </el-table-column>
      <el-table-column prop="created_at" label="提交时间">
      </el-table-column>
      <el-table-column prop="user.user_no" label="用户id">
      </el-table-column>
      <el-table-column prop="order_total" label="订单金额">
      </el-table-column>
      <el-table-column prop="order_pay_method" label="支付方式">
      </el-table-column>
      <el-table-column prop="order_source" label="订单来源" :formatter="formatSource">
      </el-table-column>
      <el-table-column prop="order_status" label="订单状态" :formatter="formatStatus">
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <router-link :to="'/order/list/detail/'+scope.row.order_id">详情</router-link>
        </template>
      </el-table-column>
    </el-table>
    <!--已发货订单列表 end-->

    <!-- 已完成订单列表 start-->
    <el-table :data="completedList" highlight-current-row v-loading="visible.listLoading" @selection-change=""
              style="width: 100%;" v-show="visible.completedList">
      <el-table-column type="selection" width="50">
      </el-table-column>
      <el-table-column prop="order_no" label="订单号">
      </el-table-column>
      <el-table-column prop="created_at" label="提交时间">
      </el-table-column>
      <el-table-column prop="user.user_no" label="用户id">
      </el-table-column>
      <el-table-column prop="order_total" label="订单金额">
      </el-table-column>
      <el-table-column prop="order_pay_method" label="支付方式">
      </el-table-column>
      <el-table-column prop="order_source" label="订单来源" :formatter="formatSource">
      </el-table-column>
      <el-table-column prop="order_status" label="订单状态" :formatter="formatStatus">
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <router-link :to="'/order/list/detail/'+scope.row.order_id">详情</router-link>
        </template>
      </el-table-column>
    </el-table>
    <!--已完成订单列表 end-->

    <!-- 已取消订单列表 start-->
    <el-table :data="refundingList" highlight-current-row v-loading="visible.listLoading" @selection-change=""
              style="width: 100%;" v-show="visible.refundingList">
      <el-table-column type="selection" width="50">
      </el-table-column>
      <el-table-column prop="order_no" label="订单号">
      </el-table-column>
      <el-table-column prop="created_at" label="提交时间">
      </el-table-column>
      <el-table-column prop="user.user_no" label="用户id">
      </el-table-column>
      <el-table-column prop="order_total" label="订单金额">
      </el-table-column>
      <el-table-column prop="order_pay_method" label="支付方式">
      </el-table-column>
      <el-table-column prop="order_source" label="订单来源" :formatter="formatSource">
      </el-table-column>
      <el-table-column prop="order_status" label="订单状态" :formatter="formatStatus">
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <router-link :to="'/order/list/detail/'+scope.row.order_id">详情</router-link>
          <span class="click-detail" @click="deleteOption(scope.row)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <!--已取消订单列表 end-->

    <!-- 退款中订单列表 start-->
    <el-table :data="deletedList" highlight-current-row v-loading="visible.listLoading" @selection-change=""
              style="width: 100%;" v-show="visible.deletedList">
      <el-table-column type="selection" width="50">
      </el-table-column>
      <el-table-column prop="order_no" label="订单号">
      </el-table-column>
      <el-table-column prop="created_at" label="提交时间">
      </el-table-column>
      <el-table-column prop="user.user_no" label="用户id">
      </el-table-column>
      <el-table-column prop="order_total" label="订单金额">
      </el-table-column>
      <el-table-column prop="order_pay_method" label="支付方式">
      </el-table-column>
      <el-table-column prop="order_source" label="订单来源" :formatter="formatSource">
      </el-table-column>
      <el-table-column prop="order_status" label="订单状态" :formatter="formatStatus">
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <router-link :to="'/order/list/detail/'+scope.row.order_id">详情</router-link>
        </template>
      </el-table-column>
    </el-table>
    <!--退款中订单列表 end-->


    <!-- 全部订单分页 start-->
    <el-col :span="24" class="toolbar" v-show="visible.allList">
      <!--<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
      <el-pagination layout="total, sizes, prev, pager ,next" :page-size="allFilters.pageSize"
                     @current-change="handleAllPageChange" @size-change="handleAllSizeChange" :total="total.all">
      </el-pagination>
    </el-col>
    <!-- 全部订单分页 end -->

    <!-- 待付款订单分页 start-->
    <el-col :span="24" class="toolbar" v-show="visible.unpaidList">
      <!--<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
      <el-pagination layout="total, sizes, prev, pager ,next" :page-size="unpaidFilters.pageSize"
                     @current-change="handleUnpaidPageChange" @size-change="handleUnpaidSizeChange"
                     :total="total.unpaid">
      </el-pagination>
    </el-col>
    <!-- 待付款订单分页 end -->

    <!-- 待发货订单分页 start-->
    <el-col :span="24" class="toolbar" v-show="visible.undeliveredList">
      <!--<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
      <el-pagination layout="total, sizes, prev, pager ,next" :page-size="undeliveredFilters.pageSize"
                     @current-change="handleUndeliveredPageChange" @size-change="handleUndeliveredSizeChange"
                     :total="total.undelivered">
      </el-pagination>
    </el-col>
    <!-- 待发货订单分页 end -->

    <!-- 已发货订单分页 start-->
    <el-col :span="24" class="toolbar" v-show="visible.deliveredList">
      <!--<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
      <el-pagination layout="total, sizes, prev, pager ,next" :page-size="deliveredFilters.pageSize"
                     @current-change="handleDeliveredPageChange" @size-change="handleDeliveredSizeChange"
                     :total="total.delivered">
      </el-pagination>
    </el-col>
    <!-- 已发货订单分页 end -->

    <!-- 已完成订单分页 start-->
    <el-col :span="24" class="toolbar" v-show="visible.completedList">
      <!--<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
      <el-pagination layout="total, sizes, prev, pager ,next" :page-size="completedFilters.pageSize"
                     @current-change="handleCompletedPageChange" @size-change="handleCompletedSizeChange"
                     :total="total.completed">
      </el-pagination>
    </el-col>
    <!-- 已完成订单分页 end -->

    <!-- 退款中订单分页 start-->
    <el-col :span="24" class="toolbar" v-show="visible.refundingList">
      <!--<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
      <el-pagination layout="total, sizes, prev, pager ,next" :page-size="refundingFilters.pageSize"
                     @current-change="handleRefundingPageChange" @size-change="handleRefundingSizeChange"
                     :total="total.refunding">
      </el-pagination>
    </el-col>
    <!-- 退款中订单分页 end -->


    <!-- 取消订单分页 start-->
    <el-col :span="24" class="toolbar" v-show="visible.deletedList">
      <!--<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
      <el-pagination layout="total, sizes, prev, pager ,next" :page-size="deletedFilters.pageSize"
                     @current-change="handleDeletedPageChange" @size-change="handleDeletedSizeChange"
                     :total="total.deleted">
      </el-pagination>
    </el-col>
    <!-- 取消订单分页 end -->


  </section>
</template>

<script>
  import { getOrderList, deleteOrder } from '../../api/api'

  export default {
    data () {
      return {
        tab: '',
        total: {
          all: 0,
          unpaid: 0,
          undeliveredList: 0,
          delivered: 0,
          completed: 0,
          refunding: 0,
          deleted: 0
        },
        children: [],
        tabLabel: {
          all: '全部订单',
          unpaid: '待付款',
          undelivered: '待发货',
          delivered: '已发货',
          completed: '已完成',
          refunding: '退货中',
          deleted: '已取消'
        },
        //  dataPicker 日期选择器
        pickerOptions1: {
          shortcuts: [
            {
              text: '今天',
              onClick (picker) {
                picker.$emit('pick', new Date())
              }
            },
            {
              text: '昨天',
              onClick (picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', date)
              }
            },
            {
              text: '一周前',
              onClick (picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', date)
              }
            },
            {
              text: '一个月前',
              onClick (picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', date)
              }
            },
            {
              text: '三个月前',
              onClick (picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', date)
              }
            }
          ]
        },
        allFilters: {
          search: '',
          order_type: '',
          user_no: '',
//          expand: 'orderProduct,parent',
          pageSize: 10
        },
        unpaidFilters: {
          search: '',
          order_type: '',
          order_status: 1,
          user_no: '',
//              expand: 'orderProduct,parent',
          pageSize: 10
        },
        undeliveredFilters: {
          search: '',
          order_type: '',
          user_no: '',
//              expand: 'orderProduct,parent',
          pageSize: 10,
          order_status: 2
        },

        deliveredFilters: {
          search: '',
          order_type: '',
          user_no: '',
//          expand: 'orderProduct,parent',
          pageSize: 10,
          order_status: 3
        },
        completedFilters: {
          search: '',
          order_type: '',
          user_no: '',
//              expand: 'orderProduct,parent',
          pageSize: 10,
          order_status: 4
        },
        refundingFilters: {
          search: '',
          order_type: '',
          user_no: '',
//              expand: 'orderProduct,parent',
          pageSize: 10,
          order_status: 5
        },
        deletedFilters: {
          search: '',
          order_type: '',
          user_no: '',
//              expand: 'orderProduct,parent',
          pageSize: 10,
          order_status: 0
        },

        allList: [],
        unpaidList: [],
        undeliveredList: [],
        deliveredList: [],
        completedList: [],
        refundingList: [],
        deletedList: [],
        visible: {
          listLoading: false,
          allList: true,
          unpaidList: false,
          undeliveredList: false,
          deliveredList: false,
          completedList: false,
          refundingList: false,
          deletedList: false
        }
      }
    },
    computed: {
      typeOptions () {
        return this.$store.getters.orderType
      }
    },
    methods: {
      // 导出
      exportToExcel (type) {
        switch (type) {
        case 'all':
          let allFilters = {
            sort: '',
            search: this.allFilters.search,
            pageSize: 1000000, // 暂时100万条
            startDate: this.allFilters.startDate,
            endDate: this.allFilters.endDate,
            order_type: this.allFilters.order_type,
            excel: 'excel'
          }
          getOrderList(allFilters).then(res => {
            if (parseInt(res.status) === 1) {
              let a = document.createElement('a')
              a.href = res.data
              console.log(a.href);
              a.download = 'order.xlsx'
              a.click()
            } else {
              this.$alert('下载失败', '错误', {type: 'error'})
            }
          })
          break
        case 'unpaid':
          let unpaidFilters = {
            sort: '',
            search: this.unpaidFilters.search,
            pageSize: 1000000, // 暂时100万条
            startDate: this.unpaidFilters.startDate,
            endDate: this.unpaidFilters.endDate,
            order_type: this.unpaidFilters.order_type,
            order_status: 1,
            excel: 'excel'
          }
          getOrderList(unpaidFilters).then(res => {
            if (parseInt(res.status) === 1) {
              let a = document.createElement('a')
              a.href = res.data
              a.download = 'order.xlsx'
              a.click()
            } else {
              this.$alert('下载失败', '错误', {type: 'error'})
            }
          })
          break
        case 'undelivered':
          let undeliveredFilters = {
            sort: '',
            search: this.undeliveredFilters.search,
            pageSize: 1000000, // 暂时100万条
            startDate: this.undeliveredFilters.startDate,
            endDate: this.undeliveredFilters.endDate,
            order_type: this.undeliveredFilters.order_type,
            order_status: 2,
            excel: 'excel'
          }
          getOrderList(undeliveredFilters).then(res => {
            if (parseInt(res.status) === 1) {
              let a = document.createElement('a')
              a.href = res.data
              a.download = 'order.xlsx'
              a.click()
            } else {
              this.$alert('下载失败', '错误', {type: 'error'})
            }
          })
          break
        case 'delivered':
          let deliveredFilters = {
            sort: '',
            search: this.deliveredFilters.search,
            pageSize: 1000000, // 暂时100万条
            startDate: this.deliveredFilters.startDate,
            endDate: this.deliveredFilters.endDate,
            order_type: this.deliveredFilters.order_type,
            order_status: 3,
            excel: 'excel'
          }
          getOrderList(deliveredFilters).then(res => {
            if (parseInt(res.status) === 1) {
              let a = document.createElement('a')
              a.href = res.data
              a.download = 'order.xlsx'
              a.click()
            } else {
              this.$alert('下载失败', '错误', {type: 'error'})
            }
          })
          break
        case 'completed':
          let completedFilters = {
            sort: '',
            search: this.completedFilters.search,
            pageSize: 1000000, // 暂时100万条
            startDate: this.completedFilters.startDate,
            endDate: this.completedFilters.endDate,
            order_type: this.completedFilters.order_type,
            order_status: 4,
            excel: 'excel'
          }
          getOrderList(completedFilters).then(res => {
            if (parseInt(res.status) === 1) {
              let a = document.createElement('a')
              a.href = res.data
              a.download = 'order.xlsx'
              a.click()
            } else {
              this.$alert('下载失败', '错误', {type: 'error'})
            }
          })
          break
        case 'refunding':
          let refundingFilters = {
            sort: '',
            search: this.refundingFilters.search,
            pageSize: 1000000, // 暂时100万条
            startDate: this.refundingFilters.startDate,
            endDate: this.refundingFilters.endDate,
            order_type: this.refundingFilters.order_type,
            order_status: 5,
            excel: 'excel'
          }
          getOrderList(refundingFilters).then(res => {
            if (parseInt(res.status) === 1) {
              let a = document.createElement('a')
              a.href = res.data
              a.download = 'order.xlsx'
              a.click()
            } else {
              this.$alert('下载失败', '错误', {type: 'error'})
            }
          })
          break
        case 'deleted':
          let deletedFilters = {
            sort: '',
            search: this.deletedFilters.search,
            pageSize: 1000000, // 暂时100万条
            startDate: this.deletedFilters.startDate,
            endDate: this.deletedFilters.endDate,
            order_type: this.deletedFilters.order_type,
            order_status: 0,
            excel: 'excel'
          }
          getOrderList(deletedFilters).then(res => {
            if (parseInt(res.status) === 1) {
              let a = document.createElement('a')
              a.href = res.data
              a.download = 'order.xlsx'
              a.click()
            } else {
              this.$alert('下载失败', '错误', {type: 'error'})
            }
          })
          break
        }
      },
      //   重置
      handleRestFilters (tag) {
        switch (tag) {
        case 'all':
          this.allFilters = {
            search: '',
            order_type: '',
            pageSize: 10,
            order_status: 1
          }
          this.visible.listLoading = true
          getOrderList(this.allFilters).then(res => {
            if (parseInt(res.status) === 1) {
              this.allList = res.data
              this.total.all = res.totalCount
            }
            this.visible.listLoading = false
          })
          break
        case 'unpaid':
          this.unpaidFilters = {
            search: '',
            order_type: '',
            pageSize: 10,
            order_status: 2
          }
          this.visible.listLoading = true
          getOrderList(this.unpaidFilters).then(res => {
            if (parseInt(res.status) === 1) {
              this.unpaidList = res.data
              this.total.unpaid = res.totalCount
            }
            this.visible.listLoading = false
          })
          break
        case 'undelivered' :
          this.undeliveredFilters = {
            search: '',
            order_type: '',
            pageSize: 10,
            order_status: 3
          }
          this.visible.listLoading = true
          getOrderList(this.undeliveredFilters).then(res => {
            if (parseInt(res.status) === 1) {
              this.undeliveredList = res.data
              this.total.undelivered = res.totalCount
            }
            this.visible.listLoading = false
          })
          break
        case 'delivered':
          this.deliveredFilters = {
            search: '',
            order_type: '',
            pageSize: 10,
            order_status: 4
          }
          this.visible.listLoading = true
          getOrderList(this.deliveredFilters).then(res => {
            if (parseInt(res.status) === 1) {
              this.deliveredList = res.data
              this.total.delivered = res.totalCount
            }
            this.visible.listLoading = false
          })
          break
        case 'completed':
          this.completedFilters = {
            search: '',
            order_type: '',
            pageSize: 10,
            order_status: 5
          }
          this.visible.listLoading = true
          getOrderList(this.completedFilters).then(res => {
            if (parseInt(res.status) === 1) {
              this.completedList = res.data
              this.total.completed = res.totalCount
            }
            this.visible.listLoading = false
          })
          break
        case 'deleted' :
          this.deletedFilters = {
            search: '',
            order_type: '',
            pageSize: 10,
            order_status: 0
          }
          this.visible.listLoading = true

          getOrderList(this.deletedFilters).then(res => {
            if (parseInt(res.status) === 1) {
              this.deletedList = res.data
              this.total.deleted = res.totalCount
            }
            this.visible.listLoading = false
          })
          break
        case 'refunding' :
          this.refundingFilters = {
            search: '',
            order_type: '',
            pageSize: 10
          }
          this.visible.listLoading = true
          getOrderList(this.refundingFilters).then(res => {
            if (parseInt(res.status) === 1) {
              this.refundingList = res.data
              this.total.refunding = res.totalCount
            }
            this.visible.listLoading = false
          })
          break
        }
      },
      formatStatus (row) {
        let status = parseInt(row.order_status)
        return status === 1 ? '待付款' : status === 2 ? '待发货'
          : status === 3 ? '已收货' : status === 4 ? '已完成'
            : status === 5 ? '退货中' : status === 0 ? '已取消' : '未知'
      },
      formatSource (row) {
        let source = parseInt(row.order_source)
        return source === 1 ? '微信' : source === 2 ? '移动端_web'
          : source === 3 ? 'app' : source === 4 ? 'pc' : '未知'
      },

      //  查看订单详情
      handleView (row) {
        let id = row.order_id
        this.$router.push({path: `/orders/${id}`})
        // viewUser(row.user_id).then((res)=>{

        // })
      },

      handleTagClick (tag) {
        switch (tag.name) {
        case 'all':
          this.visible.allList = true
          this.visible.unpaidList = false
          this.visible.undeliveredList = false
          this.visible.deliveredList = false
          this.visible.completedList = false
          this.visible.refundingList = false
          this.visible.deletedList = false
          break
        case 'unpaid':
          this.visible.allList = false
          this.visible.unpaidList = true
          this.visible.undeliveredList = false
          this.visible.deliveredList = false
          this.visible.completedList = false
          this.visible.refundingList = false
          this.visible.deletedList = false
          break
        case 'undelivered' :
          this.visible.allList = false
          this.visible.unpaidList = false
          this.visible.undeliveredList = true
          this.visible.deliveredList = false
          this.visible.completedList = false
          this.visible.refundingList = false
          this.visible.deletedList = false
          break
        case 'delivered':
          this.visible.allList = false
          this.visible.unpaidList = false
          this.visible.undeliveredList = false
          this.visible.deliveredList = true
          this.visible.completedList = false
          this.visible.refundingList = false
          this.visible.deletedList = false
          break
        case 'completed':
          this.visible.allList = false
          this.visible.unpaidList = false
          this.visible.undeliveredList = false
          this.visible.deliveredList = false
          this.visible.completedList = true
          this.visible.refundingList = false
          this.visible.deletedList = false
          break
        case 'deleted' :
          this.visible.allList = false
          this.visible.unpaidList = false
          this.visible.undeliveredList = false
          this.visible.deliveredList = false
          this.visible.completedList = false
          this.visible.refundingList = false
          this.visible.deletedList = true
          break
        case 'refunding' :
          this.visible.allList = false
          this.visible.unpaidList = false
          this.visible.undeliveredList = false
          this.visible.deliveredList = false
          this.visible.completedList = false
          this.visible.refundingList = true
          this.visible.deletedList = false
          break
        }
      },
      handleAllSizeChange (size) {
        this.allFilters.pageSize = size
        this.handleList('all')
      },
      handleUnpaidSizeChange (size) {
        this.unpaidFilters.pageSize = size
        this.handleList('unpaid')
      },
      handleUndeliveredSizeChange (size) {
        this.undeliveredFilters.pageSize = size
        this.handleList('undelivered')
      },
      handleDeliveredSizeChange (size) {
        this.DeliveredFilters.pageSize = size
        this.handleList('delivered')
      },
      handleCompletedSizeChange (size) {
        this.completedFilters.pageSize = size
        this.handleList('completed')
      },
      handleRefundingSizeChange (size) {
        this.refundingFilters.pageSize = size
        this.handleList('refundingList')
      },
      handleDeletedSizeChange (size) {
        this.deletedFilters.pageSize = size
        this.handleList('deleted')
      },

      handleAllPageChange (page) {
        this.allFilters.page = page
        this.handleList('all')
      },
      handleUnpaidPageChange (page) {
        this.unpaidFilters.page = page
        this.handleList('unpaid')
      },
      handleUndeliveredPageChange (page) {
        this.undeliveredFilters.page = page
        this.handleList('undelivered')
      },

      handleDeliveredPageChange (page) {
        this.deliveredFilters.page = page
        this.handleList('delivered')
      },
      handleCompletedPageChange (page) {
        this.completedFilters.page = page
        this.handleList('completed')
      },
      handleRefundingPageChange (page) {
        this.refundingFilters.page = page
        this.handleList('refunding')
      },
      handleDeletedPageChange (page) {
        this.deletedFilters.page = page
        this.handleList('deleted')
      },

      handleList (type) {
        this.visible.listLoading = true
        switch (type) {
        case 'all':
          getOrderList(this.allFilters).then(res => {
            if (parseInt(res.status) === 1) {
              this.allList = res.data
              this.total.all = res.totalCount
            }
            this.visible.listLoading = false
          })
          break
        case 'unpaid':
          getOrderList(this.unpaidFilters).then(res => {
            if (parseInt(res.status) === 1) {
              this.unpaidList = res.data
              this.total.unpaid = res.totalCount
              this.visible.listLoading = false
            }
          })
          break
        case 'undelivered':
          getOrderList(this.undeliveredFilters).then(res => {
            if (parseInt(res.status) === 1) {
              this.undeliveredList = res.data
              this.total.undelivered = res.totalCount
              this.visible.listLoading = false
            }
          })
          break
        case 'delivered':
          getOrderList(this.deliveredFilters).then(res => {
            if (parseInt(res.status) === 1) {
              this.deliveredList = res.data
              this.total.delivered = res.totalCount
            }
            this.visible.listLoading = false
          })
          break
        case 'completed':
          getOrderList(this.completedFilters).then(res => {
            if (parseInt(res.status) === 1) {
              this.completedList = res.data
              this.total.completed = res.totalCount
              this.visible.listLoading = false
            }
          })
          break
        case 'refunding':
          getOrderList(this.refundingFilters).then(res => {
            if (parseInt(res.status) === 1) {
              this.refundingList = res.data
              this.total.refunding = res.totalCount
              this.visible.listLoading = false
            }
          })
          break
        case 'deleted':
          getOrderList(this.deletedFilters).then(res => {
            if (parseInt(res.status) === 1) {
              this.deletedList = res.data
              this.total.deleted = res.totalCount
              this.visible.listLoading = false
            }
          })
          break
        }
      },

      deleteOption (row) {
        console.log(row)
        this.$confirm('确定要删除<' + row.order_no + '>吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteOrder(row.order_id).then(res => {
            if (parseInt(res.status) === 1) {
              this.getParamsList()
              this.$message({
                message: '删除成功',
                type: 'success'
              })
            } else {
              this.$alert('删除失败', '失败', {type: 'error'})
            }
          })
        })
      }

    },

    mounted () {
      this.handleList('all')
      this.handleList('unpaid')
      this.handleList('undelivered')
      this.handleList('delivered')
      this.handleList('completed')
      this.handleList('refunding')
      this.handleList('deleted')
    },
    watch: {}
  }
</script>
<style scoped rel="stylesheet/sass" lang="sass">
  a
    color : #62b8ff
    cursor: pointer
    margin-right:  20  px
  .click-detail
    color: #409EFF
    cursor: pointer
  .click-detail:hover
    color: #443dff
</style>

